<template>
  <div>
    <!--注册成功-->
    <div class="reg-success" v-if="isSuccess">
        <div class="title relative">
            <i class="icon icon-xs icon-right ab"></i>
            <p>恭喜您，注册成功！</p>
        </div>
        <p class="sucess-text">您的登录账号为：<span class="main-color">{{userName || 130668068000}}</span>
        </p>
        <div class="btn-group">
            <router-link :to="'/login'">
                <el-button type="primary">立即登录</el-button>
            </router-link>
            <!--<router-link :to="'/login'">
                <el-button type="primary">完善资料</el-button>
            </router-link>-->
        </div>
        <p class="timeout">{{seconds}}秒后自动跳转回上个页面</p>
        <img src="/static/images/login/qrcode.png">
        <p class="scan">扫一扫下载球苗APP</p>
    </div>
    <!--注册失败-->
    <div class="reg-fail" v-if="!isSuccess">
        <div class="title relative">
            <i class="icon icon-xs icon-error ab"></i>
            <p>抱歉，未能注册成功！</p>
        </div>
        <p class="fail-text">请检查一下网络是否有问题，点击下面的按钮重新提交</p>
        <router-link :to="'/signup/account'">
          <el-button class="btn-err" type="primary">重新提交</el-button>
        </router-link>
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      isSuccess: true,
      userNmae: '',
      seconds: 6
    }
  },
  created () {
    this.isSuccess = this.$route.query.success
    this.userName = this.$route.query.userName
    if (this.isSuccess) {
      let timer = () => {
        if (this.seconds === 1) {
          this.$router.push({path: '/login'})
        } else {
          this.seconds--
          setTimeout(() => {
            timer()
          }, 1000)
        }
      }
      timer()
    }
  }
}
</script>

<style scoped lang="scss">
  @import '~styles/var.scss';

  .reg-success {
      text-align: center;
      .sucess-text {
          margin: 20px auto 40px;
      }
      .timeout {
          color: $sub-color;
          margin: 15px 0 50px;
          font-size: 12px;
      }
      .scan {
          margin-top: 10px;
      }
  }

  .reg-fail {
      padding: 100px 0 120px;
      text-align: center;
      .title {
          color: $red;
      }
      .fail-text {
          margin: 20px 0 30px;
      }
      .btn-err {
          background-color: #e94141;
          border-color: #e94141;
      }
  }
</style>
